<template>
  <div class="wrap">
    <basic-opt :has_left="true">
      <template #search>
        <div class="opt-item">
          <el-input class="w-ipt" placeholder="请输入姓名" suffix-icon="el-icon-search" v-model="search.face_name"
                    size="medium" @change="getFaceName">
          </el-input>
        </div>
        <div class="opt-item" v-if="face_id_list.length > 0">
          <el-select v-model="face_obj" value-key="id" @change="faceIdChanged" filterable
                     placeholder="请输入选择face_id" size="medium">
            <el-option v-for="(item,index) in face_id_list" :key="index" :label="item.face_id"
                       :value="item">
              <span>id:{{ item.id }} | {{ item.face_id }}</span>
            </el-option>
          </el-select>
        </div>
      </template>
    </basic-opt>

    <div v-if="search.face_id">
      <el-tabs v-model="tab_name" @tab-click="handleTab" type="border-card">
        <el-tab-pane label="推送人脸" name="pushFace">
          <push-config v-if="tab_name === 'pushFace'"></push-config>
        </el-tab-pane>
        <el-tab-pane label="人脸地址关系" name="faceAddressRelation">
          <address-relation v-if="tab_name === 'faceAddressRelation'"></address-relation>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
  <!--  mobile  -->
  <div class="mobile-wrap">
    <div class="mobile-search-vertical">
      <el-input class="w-ipt" placeholder="请输入姓名" suffix-icon="el-icon-search" v-model="search.face_name"
                size="medium" @change="getFaceName">
      </el-input>
      <div v-if="face_id_list.length > 0">
        <el-select v-model="face_obj" value-key="id" @change="faceIdChanged" filterable
                   placeholder="请输入选择face_id" size="medium">
          <el-option v-for="(item,index) in face_id_list" :key="index" :label="item.face_id"
                     :value="item">
            <span>id:{{ item.id }} | {{ item.face_id }}</span>
          </el-option>
        </el-select>
      </div>
    </div>
    <div v-if="search.face_id">
      <el-tabs v-model="tab_name" @tab-click="handleTab" type="border-card">
        <el-tab-pane label="推送人脸" name="pushFace">
          <push-config v-if="tab_name === 'pushFace'"></push-config>
        </el-tab-pane>
        <el-tab-pane label="人脸地址关系" name="faceAddressRelation">
          <address-relation v-if="tab_name === 'faceAddressRelation'"></address-relation>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import API from '@/api/index.js'
import PushConfig from '@/components/face/push-config.vue'
import AddressRelation from '@/components/face/address-relation.vue'

export default {
  name: 'faceOperation',
  components: {
    PushConfig,
    AddressRelation
  },
  data() {
    return {
      search: {
        face_name: '',
        face_id: ''
      },
      face_obj: {},
      face_id_list: [],
      face_id: '',
      face_group: '',
      tab_name: 'pushFace',

      screen_min_width: document.body.clientWidth // 屏幕宽度

    }
  },
  mounted() {
    this.getScreenMinWidth();
    this.search.face_name = localStorage.getItem('face_name') ? localStorage.getItem('face_name') : '';
    if (this.search.face_name) {
      this.getFaceName();
    }
    this.face_obj = localStorage.getItem('face_id') ? localStorage.getItem('face_id') : '';
    this.search.face_id = localStorage.getItem('face_id') ? localStorage.getItem('face_id') : '';
    this.face_id = localStorage.getItem('face_id') ? localStorage.getItem('face_id') : '';
    this.face_group = localStorage.getItem('face_group') ? localStorage.getItem('face_group') : '';
    window.location.hash = "#/face-operation?face_id=" + this.face_id + "&face_group=" + this.face_group;
  },
  methods: {
    // 判断横屏
    getScreenMinWidth() {
      let self = this;
      if (self.screen_min_width < '500') {
        self.$message.error({
          message: '请用横屏查看此页面'
        });
      }
    },
    getFaceName() {
      let self = this;
      self.face_obj = {};
      self.face_id_list = [];
      API.faces(1, 100, self.search.face_name).then(res => {
        self.face_id_list = res.data.data;
        if (self.face_id_list.length <= 0) {
          self.$message.error("未查询到此人");
        }
      })
    },
    faceIdChanged(val) {
      let self = this;
      console.log(val)
      self.initData();
      self.$nextTick(function () {
        self.search.face_id = val.face_id;
        localStorage.setItem('face_name', val.name);
        localStorage.setItem('face_id', val.face_id);
        localStorage.setItem('face_group', val.group);
        window.location.hash = "#/face-operation?face_id=" + val.face_id + "&face_group=" + val.group;
      });
    },
    initData() {
      let self = this;
      self.search.face_id = '';
      self.tab_name = 'pushFace';
      localStorage.removeItem('face_id');
      localStorage.removeItem('face_group');
    },
    handleTab() {
    }
  },
  beforeUnmount() {
    let self = this;
    self.face_obj = {};
    self.face_id_list = [];
    self.search.face_id = '';
    localStorage.removeItem('face_name');
    localStorage.removeItem('face_id');
    localStorage.removeItem('face_group');
  }
}
</script>

<style>
</style>
